import React, { useState, useEffect } from 'react';
import { request } from 'umi';
import styles from './index.less';
import { Table, Button, Modal, Input, Form, message, Space } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
// 接口
import { Room } from '../../../utils/intertace';
const Class: React.FC = () => {
  // 获取教室接口
  let [room, setRoom] = useState<Room[]>([]);
  useEffect(() => {
    // 获取所有教室
    request('/manger/room').then((res) => {
      setRoom(res.data);
    });
  }, []);
  // 遍历数据
  const data = room.map((item, index) => {
    return {
      key: index,
      room_id: item.room_id,
      room_text: item.room_text,
    };
  });
  // 打印数据
  // console.log(data);
  const columns = [
    { title: '教室号', dataIndex: 'room_text', key: 'room_id' },
    {
      title: '删除',
      dataIndex: '',
      key: 'room_id',
      render: (key: string) => (
        <Space>
          <div
            onClick={() => {
              confirm(key);
            }}
          >
            删除
          </div>
        </Space>
      ),
    },
  ];

  // 弹框
  function confirm(key: any) {
    Modal.confirm({
      title: '确定要删除吗？',
      icon: <ExclamationCircleOutlined />,
      okText: '确认',
      cancelText: '取消',
      onOk: function add() {
        // 删除教室接口
        request('/manger/room/delete', {
          method: 'DELETE',
          data: { room_id: key.room_id },
        }).then((res) => {
          if (res.code === -1) {
            message.error(res.msg);
          } else {
            // 重新渲染获取所有教室
            request('/manger/room').then((res) => {
              setRoom(res.data);
            });
            message.success(res.msg);
          }
        });
      },
    });
  }
  // 弹框显示隐藏
  const [isModalVisible, setIsModalVisible] = useState(false);
  // 点击弹框显示隐藏
  const showModal = () => {
    setIsModalVisible(true);
  };
  const handleOk = () => {
    setIsModalVisible(false);
  };
  const handleCancel = () => {
    setIsModalVisible(false);
  };

  const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
  };
  const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
  };

  const Demo = () => {
    const onFinish = (values: any) => {
      console.log('Success:', values);
      // 更新教室接口
      request('/manger/room', { method: 'POST', data: { ...values } }).then(
        (res) => {
          console.log(res);
          if (res.code === -1) {
            message.error(res.msg);
          } else {
            // 重新渲染获取所有教室
            request('/manger/room').then((res) => {
              setRoom(res.data);
            });
            message.success(res.msg);
          }
        },
      );
      // 关闭弹框
      setIsModalVisible(false);
    };

    const onFinishFailed = (errorInfo: any) => {
      console.log('Failed:', errorInfo);
    };

    return (
      <Form
        {...layout}
        name="basic"
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
      >
        <Form.Item
          label="教室号"
          name="room_text"
          rules={[{ required: true, message: '教室号不能为空' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item {...tailLayout}>
          <Button type="primary" htmlType="submit">
            提交
          </Button>
        </Form.Item>
      </Form>
    );
  };
  return (
    <div className={styles.room}>
      <h2>教室管理</h2>
      <div className={styles.center}>
        <div className={styles.centers}>
          <div className={styles.button}>
            <Button type="primary" onClick={showModal}>
              + 添加教室
            </Button>
          </div>
          <div>
            <Table columns={columns} pagination={false} dataSource={data} />
            <Modal
              title="添加班级"
              visible={isModalVisible}
              onOk={handleOk}
              onCancel={handleCancel}
              okText="确定"
              cancelText="取消"
              footer={false}
            >
              <Demo />
            </Modal>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Class;
